<template>
  <div class="app-container" @click="popupShow = false" v-loading="pageLoading" @click.stop="(calendarIndex = null)">

    <el-row :gutter="20" class="mb12">
      <el-col :span="16">
        <div class="topTitle">
          <div class="top-title pd-r10 ">
            <span>设备形式历</span>
            <!-- <i class="pointer f18 text-blue" @click="topRightShowClick"
              :class="[!showRight?'el-icon-arrow-left':'el-icon-arrow-right']"></i> -->
          </div>
          <!-- <el-button type="primary" class="fr ml-20" @click="createItem">设备绑定</el-button> -->
          <el-button type="warning" class="fr " @click="updateItem">设备绑定</el-button>
          <div class="filter-container flex flex-center">
            <el-button :icon="Back" title="上一月" @click="queryMouthChange(false)"></el-button>
            <el-date-picker style="margin-right:0" format="YYYY-MM" value-format="YYYY-MM-01" :editable="false"
              :clearable="false" v-model="query.time" type="month" placeholder="选择月" @change="getList">
            </el-date-picker>
            <el-button :icon="Right" title="下一月" @click="queryMouthChange(true)">
            </el-button>
            <el-button type="success" plain @click="research">搜索</el-button>
          </div>

          <div class="calendar" v-loading="calendarLoading">
            <div class="calendar_header">
              <div class="calendar_item">一</div>
              <div class="calendar_item">二</div>
              <div class="calendar_item">三</div>
              <div class="calendar_item">四</div>
              <div class="calendar_item">五</div>
              <div class="calendar_item">六</div>
              <div class="calendar_item">日</div>
            </div>
            <div class="calendar_main">
              <div class="calendar_item" v-for="(item, index) in list" :key="index">
                <div v-if="item.isEmpty">

                </div>
                <div v-else class="calendar_item_base">
                  <!-- 顶部日期 -->
                  <div class="pd4 " style="font-weight:bolder"
                    :style="{ color: item.DateType == 'R' ? '#f56c6c' : '' }">
                    {{ dayjs(item.WorkDate).format('MM-DD') }}
                  </div>
                  <div @click="calendarClick(item.Machines, item.WorkDate, item)"
                    class="flex flex-align-center flex-center"
                    style="height:80%;text-align:center;justify-content: center;font-weight: 700;"
                    :style="{ color: dayjs(item.WorkDate).format('YYYY-MM-DD') == curDate ? '#7300E6' : '#E6A23C' }">
                    维护数:{{ item.Machines.length }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="topTitle">
          <div class="top-title pd-r10 ">
            <span>{{ curDate }} 设备信息</span>
          </div>
          <div class="mb10 flex flex-row-end fr mb-10" v-if="curDate">
            <!-- <el-button type="primary" v-if="!(row&& row.Id)" @click="calendarClickSelect(0)">{{$ts('newly_added')}}
            </el-button> -->
            <el-button type="warning" @click="calendarClickSelect(1)">调整</el-button>
            <el-popconfirm title="确定删除当前的设备信息吗？" @confirm="calendarClickSelect(2)">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </div>


          <z-table :list="rightList" :tableProps="tableProps" :columns="leftColumns" v-loading="bRloading">
            <template v-slot:content="{ row, key }">
              <span v-if="key == 'ClockInType'">{{ ['正常上班', '休息', '加班'][row[key] - 1] }}</span>
              <span v-else-if="key == 'CalendarType'">{{ CalendarTypeStatus.find(i => i.value == row[key])?.label
                }}</span>
              <span v-else-if="key == 'StartTime'" v-timeFormat="row[key]" format="MM-dd HH:mm"></span>
              <span v-else-if="key == 'EndTime'" v-timeFormat="row[key]" format="MM-dd HH:mm"></span>
              <span v-else> {{ row[key] }}</span>
            </template>
          </z-table>
        </div>
      </el-col>
    </el-row>

    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" v-model="editFormVisible">
      <template v-slot:extra-area>
        <div style="padding-left: 140px">
          <template v-if="updateFlag">
            <span class="mb-10" style="color:orange;font-size:14px">当前日期为: {{ curDate }},调整功能仅调整当天数据</span>
          </template>
          <div class="panel-info">
            <div class="panel-title">设备信息</div>

            <div class="panel-body">
              <el-row :gutter="10" type="flex" style="font-size: 12px; margin-bottom: 15px">
                <el-col :span="6">
                  <label>设备</label>
                </el-col>
                <el-col :span="6">
                  <label>状态</label>
                </el-col>
                <el-col :span="9">
                  <label>时间</label>
                </el-col>
                <el-col :span="3">
                  <label>操作</label>
                </el-col>
              </el-row>
              <el-row :gutter="10" class="mb-10" type="flex" v-for="(d, i) in MachineInfo" :key="i">
                <el-col :span="6">
                  <el-select style="width: 100%" v-model="d.MachineId" filterable>
                    <el-option v-for="(i, t) in MachineOptions" :key="t" :label="`${i.MachineCode} ${i.MachineName} `"
                      :value="i.MachineId"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-select style="width: 100%" v-model="d.CalendarType" filterable clearable>
                    <el-option v-for="(i, t) in CalendarTypeStatus" :key="t" :label="i.label"
                      :value="i.value"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="9" v-if="!updateFlag">
                  <div class="flex flex-center">
                    <el-date-picker v-model="d.time" type="datetimerange" start-placeholder="Start date"
                      end-placeholder="End date" format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD HH:mm"
                      time-format="HH:mm" />
                  </div>
                </el-col>
                <el-col :span="9" v-else>
                  <div class="flex flex-center">
                    <el-time-picker v-model="d.time" is-range range-separator="至" format="HH:mm" value-format="HH:mm"
                      start-placeholder="Start time" end-placeholder="End time" />
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="flex">
                    <a class="text-red t-18 mt-8" type="text" @click.prevent="deleteSite(d, i)" circle><i
                        class="el-icon-delete"></i></a>
                    <a class="text-blue t-18 ml-12 mt-8" type="text" @click.prevent="addSite"
                      v-if="i == MachineInfo.length - 1" circle><i class="el-icon-circle-plus-outline"></i></a>
                  </div>
                </el-col>

              </el-row>
            </div>
          </div>
        </div>
      </template>
    </z-form-dialog>

    <z-form-dialog :name="name" :data="data2" :formProps="formProps" :fields="fields2" @submit="submit2"
      :submitLoading="submitLoading" v-model="editFormVisible2">


    </z-form-dialog>
    <!-- <action-over-delete :loading="submitLoading" :name="actionsOverType==1?$ts('LineBodySwap'):$ts('BatchDelete')"
      :type="actionsOverType" v-model="editFormVisible3" @submit="submit3">
    </action-over-delete> -->

    <div class="popup-tooltip" :style="{
      top: popup.top + 'px',
      left: popup.left + 'px'
    }" v-show="popupShow">
      <template v-for="item in popupList">
        <div v-if="item.ishaveDate" class="popup-tooltip-item" @click="popupClick(item)" :key="item.title">
          {{ item.title }}</div>
      </template>
    </div>

  </div>
</template>


<script setup>
import {
  Back,
  Right
} from '@element-plus/icons-vue'
</script>
<script>
import commonMixin from '@/views/_common/mixin'
import dayjs from 'dayjs'
import ActionOverDelete from './components/actionOverDelete.vue'
import _ from 'lodash'

export default {
  mixins: [commonMixin],
  components: {
    ActionOverDelete,
  },
  name: 'machineCalendar',
  data: function () {
    return {
      updateFlag: false, // 调整行事历还是批量创建
      api: this.$api.MachineCalendar,
      apiCreate: this.$api.calendar + 'save',
      apiEdit: this.$api.calendar + 'save',
      MachineInfo: [{
        MachineId: null,
        CalendarType: null,
        time: "",
        StartTime: null,
        EndTime: null
      }],
      MachineOptions: [],
      pickerOptions: {

      },
      CalendarTypeStatus: [
        {
          value: 1,
          label: '维修'
        },
        {
          value: 2,
          label: '保养'
        },
        {
          value: 3,
          label: '停机'
        },
      ],
      name: '行事历',
      leftColumns: [
        { title: '设备编码', key: 'MachineCode', width: 100 },
        { title: '设备名称', key: 'MachineName', width: 100 },
        { title: '开始时间', key: 'StartTime', width: 130 },
        { title: '结束时间', key: 'EndTime', width: 130 },
        { title: '工时(min)', key: 'Hours' },
        { title: '状态', key: 'CalendarType', width: 80 },
      ],
      formProps: {
        dialogWidth: '70%',
        labelWidth: '140px',
        title: "设备行事历", //dialog title
      },
      rightColumns: [
        { title: '类型', key: 'ClockInType' },
        { title: '开始时间', key: 'StartTime' },
        { title: '结束时间', key: 'EndTime' },
        { title: '工时(min)', key: 'Hours' },
      ],
      fields: [


        {
          title: '日期范围',
          key: 'dataTime',
          name: 'dateTime',
          required: true,
          hidden: false,
          props: {
            type: 'daterange',
            valueFormat: 'YYYY-MM-DD',
            disabled: false,
            rangeSeparator: '至',
            startPlaceholder: this.$ts('StartDate'),
            endPlaceholder: this.$ts('EndDate'),
          },
        },


      ],

      fields2: [
        {
          title: '日期',
          key: 'WorkDate',
          props: {
            disabled: true,
          },
        },

        {
          title: '班次',
          key: 'ShiftId',
          options: [],
          filterable: true,
          name: 'select',
        },
      ],
      tableProps: {
        border: true,
        hideOperations: true,
        NOscrollBar: true,
      },
      query: {
        time: dayjs().format('YYYY-MM-01'),
      },
      dataUpdate: {},
      calendarLoading: false,
      leftList: [],
      rightList: [],
      bLloading: false,
      bRloading: false,
      editButtonShow: false,
      calendarIndex: null, // 当前日期
      calendarType: 0,
      calendarHoverIndex: null,
      calendarHoverType: 0,
      editFormVisible2: false,
      data2: {},
      rightQuery: {},
      editFormVisible3: false,
      actionsOverType: 1,

      popupShow: false,
      popup: {
        top: 0,
        left: 0,
        type: 0, //默认为白班右击
      },
      popupList: [
        { title: '新增', ishaveDate: false },
        { title: '编辑', ishaveDate: false },
        { title: '删除', ishaveDate: false },
      ],
      popupType: 0,
      popupData: {},

      showRight: true,
      initData: {
        Weeks: [],
        NLostRate: 100,
        DLostRate: 100,
      },
      row: {},
      showTitleName: true,
      foremanOptions: [],
      curDate: null,
      curId: null
    }
  },
  computed: {
    showRightSpan: {
      get() {
        if (!this.showRight) return this.showRight
        return setTimeout(() => {
          return this.showRight
        }, 500)
      },
    },
  },
  filters: {
    dataTime: function (val) {
      return dayjs(val).format('HH:mm')
    },
    hours: function (val) {
      return parseFloat(val / 60).toFixed(2)
    },
  },
  methods: {
    changeIsResult(v) {
      let tmp = this.fields.find(i => i.key == 'IsResult')
      tmp.title = !v ? '工作日' : '休息日'
    },
    //
    createItem() {
      // this.setFieldsDisable(false, ['LineCode'])
      this.data = _.cloneDeep(this.initData)
      this.setForemanOptions()
      this.updateFlag = false
      this.editFormVisible = true
      let IsResult = this.fields.find(i => i.key == 'IsResult')
      let IsSkip = this.fields.find(i => i.key == 'IsSkip')
      let Weeks = this.fields.find(i => i.key == 'Weeks')
      IsResult.hidden = true
      IsSkip.hidden = false
      Weeks.hidden = false
    },
    async editItem(item, type) {
      // 调整班次，分白班夜班
      let ScheduleId0 = this.fields.find(i => i.key == 'ScheduleId0')
      let ScheduleId1 = this.fields.find(i => i.key == 'ScheduleId1')

      let Shift = this.fields2.find(i => i.key == 'ShiftId')
      Shift.options = this.calendarType == 0 ? ScheduleId0.options : ScheduleId1.options

      this.editFormVisible2 = true
      this.data2.WorkDate = dayjs(item.WorkDate).format('YYYY-MM-DD')
      this.data2.ShiftId = item.ShiftId
      this.data2.PlantCalendarId = item.PlantCalendarId
    },
    calendarClick(row, date, item) {
      this.curId = item.MachineCalendarId
      this.calendarIndex = _.cloneDeep(dayjs(date).format('YYYY-MM-DD'))
      this.curDate = _.cloneDeep(dayjs(date).format('YYYY-MM-DD'))
      this.row = row ? _.cloneDeep(row) : {}


      this.editButtonShow = true
      if (row.length) this.rightList = this.row
      else this.rightList = []


    },
    checkDataFormat(day, arr) {
      let addDay = new Date(dayjs(day).valueOf()).getDay()
      let weekIndex = [1, 2, 3, 4, 5, 6, 0]
      let needAddList = weekIndex.findIndex((x) => addDay == x)
      let addArr = _.cloneDeep(arr)
      if (needAddList > 0) {
        for (let i = 0; i < needAddList; i++) {
          addArr.unshift({
            isEmpty: true,
          })
        }
      }
      return addArr
    },

    // 设定
    setForemanOptions() {
      this.setFieldOptions(
        'LineCode0',
        this.foremanOptions.filter(
          (x) => x.ForemanCode.indexOf(this.data.LineCode) != -1
        ),
        'Id',
        ['ForemanCode', 'ForemanName']
      )
      this.setFieldOptions(
        'LineCode1',
        this.foremanOptions.filter(
          (x) => x.ForemanCode.indexOf(this.data.LineCode) != -1
        ),
        'Id',
        ['ForemanCode', 'ForemanName']
      )
    },
    deleteSite(item, index) {

      if (this.MachineInfo.length == 1) {
        this.MachineInfo = [{}]
      } else {

        this.MachineInfo.splice(index, 1)
      }
    },
    addSite() {

      this.MachineInfo.push({
        MachineId: null,
        CalendarType: null,
        time: null,
      })
    },
    getForemanOptions() {
      this.http.post(this.$api.shift + 'GetPageData', {
        rows: 999,
      }).then((r) => {
        this.setFieldOptions('ScheduleId0', r.rows.filter(i => i.ShiftType == 0), 'ShiftId', [
          'ShiftCode',
          'ShiftName',
        ])
        this.setFieldOptions('ScheduleId1', r.rows.filter(i => i.ShiftType == 1), 'ShiftId', [
          'ShiftCode',
          'ShiftName',
        ])
      })

    },
    // 获取工时排版
    getScheduleList(id) {
      this.bRloading = true
      let data = {
        row: 999,
        wheres: JSON.stringify([{
          name: "ShiftId",
          value: id,
        }])
      }
      this.http.post(this.$api.shiftDetail + 'GetPageData', data)
        .then((r) => {
          this.rightList = r.rows
          this.bRloading = false
        })
        .catch(() => {
          this.bRloading = false
        })
    },
    formatBeforeSave(data) {
      let tmp = _.cloneDeep(data)
      // tmp.LineCode = tmp.LineCode ? tmp.LineCode : this.query.LineCode
      if (tmp.dateTime instanceof Array && tmp.dateTime.length == 2) {
        tmp.StartTime = tmp.dateTime[0]
        tmp.EndTime = tmp.dateTime[1]
      } else {
        tmp.StartTime = ''
        tmp.EndTime = ''
      }


      return tmp
    },
    formatList(list) {
      let tmp = _.cloneDeep(list)
      if (!tmp.length) return []
      let oldDataList = tmp.map((x) => x.WorkDate)
      let newDataList = new Set(oldDataList)
      console.log(list, 'list')
      let dataList = Array.from(newDataList).map((x) => {
        return {
          WorkDate: x,
          MachineCalendarId: tmp.find(i => i.WorkDate == x).MachineCalendarId,
          Machines: tmp.filter((y) => y.WorkDate == x && y.MachineId).map((z) => z),
        }
      })


      return this.checkDataFormat(dataList[0].WorkDate, dataList)
    },
    validateTimeSlots(data) {
      // 将时间字符串转换为分钟数
      function parseTime(timeStr) {
        const [hours, minutes] = timeStr.split(':').map(Number);
        return hours * 60 + minutes;
      }

      // 对每个 MachineId 的数据进行分组
      const groupedData = data.reduce((groups, item) => {
        (groups[item.MachineId] = groups[item.MachineId] || []).push(item);
        return groups;
      }, {});

      // 遍历每个 MachineId 的数据组
      for (const machineId in groupedData) {
        const machineData = groupedData[machineId];

        // 按照开始时间排序
        const sortedData = machineData.sort((a, b) => parseTime(a.StartTime) - parseTime(b.StartTime));

        for (let i = 0; i < sortedData.length; i++) {
          const current = sortedData[i];

          // 检查结束时间是否大于开始时间
          if (parseTime(current.EndTime) <= parseTime(current.StartTime)) {
            this.$message.error(`结束时间不能小于开始时间`)
            return false;
          }

          // 检查当前时间段是否与后续时间段重叠
          for (let j = i + 1; j < sortedData.length; j++) {
            const next = sortedData[j];

            // 如果下一个时间段的开始时间小于当前时间段的结束时间，则存在重叠
            if (parseTime(next.StartTime) < parseTime(current.EndTime)) {
              this.$message.error(`相同设备时间段不能重叠`)
              return false;
            }
          }
        }
      }

      // 所有条件均满足
      return true;
    },

    // 删除当前设备
    submit2() {
      this.submitLoading = true
      this.http.post(this.api + 'UpdateMachine', this.data2)
        .then((r) => {



         let machineData = {
            deviceIds:  [],
            StartTime: dayjs(this.curDate).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
           EndTime: dayjs(this.curDate).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
          }
          this.http.post(this.$api.Schedule + 'GetMachineClendar',
            {
              ...machineData
            }
          ).then((r) => {
            this.editFormVisible = false
            this.getList()
            this.curId = null
            this.MachineInfo = [{}]
            this.data = {}

          })

   
        })
        .catch((r) => {
          this.editFormVisible2 = false
          this.submitLoading = false
        }).finally(()=>{
          this.submitLoading = false

        })
    },
    submit() {

      //判断 this.MachineInfo 中time时间是否在min,max之间
      let data = this.formatBeforeSave(this.data)
      let check = this.validataData(this.fields, data)
      if (!check) return
      let url = this.updateFlag ? this.api + 'UpdateMachine' : this.$api.MachineCalendar + 'GetMachineCalendarData'

      data.Date = this.curDate
      data.MachineCalendarId = this.curId

      if (this.updateFlag) {
        if (this.MachineInfo.some(i => (!i.time?.length || !i.MachineId || !i.CalendarType))) {
          this.$message.error('设备/状态/时间 均不可为空')
          return
        }
        data.Items = this.MachineInfo.map(i => {
          const start = dayjs(i.time[0], 'HH:mm');
          const end = dayjs(i.time[1], 'HH:mm');
          return {
            MachineId: i.MachineId,
            CalendarType: i.CalendarType,
            StartTime: i.time?.length ? i.time[0] : null,
            EndTime: i.time?.length ? i.time[1] : null,
            Hours: end.diff(start, 'minute')
          }
        })

      } else {
        data.Items = this.MachineInfo[0]?.time.length ? this.MachineInfo.map(i => {
          const start = dayjs(i.time[0], 'YYYY-MM-DD HH:mm');
          const end = dayjs(i.time[1], 'YYYY-MM-DD HH:mm');
          return {
            MachineId: i.MachineId,
            CalendarType: i.CalendarType,
            StartTime: i.time?.length ? dayjs(i.time[0]).format('YYYY-MM-DD HH:mm') : null,
            EndTime: i.time?.length ? dayjs(i.time[1]).format('YYYY-MM-DD HH:mm') : null,
            // Hours: end.diff(start, 'minute')

          }
        }) : null
      }

      if (!this.validateTimeSlots(data.Items)) {
        return;
      }



      this.submitLoading = true
      this.http
        .post(url, data)
        .then((r) => {

          //生成设备班表
          var machineData = {}
          if (this.updateFlag) {
            // 如果是修改的话，就只是修改这一天的设备班表
            machineData = {
              deviceIds: [...new Set(this.MachineInfo.map(i => i.MachineId))] || [],
              StartTime: dayjs(data.Date).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
              EndTime: dayjs(data.Date).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
            }
          } else {
            machineData = {
              deviceIds: [...new Set(this.MachineInfo.map(i => i.MachineId))] || [],
              StartTime: data?.StartTime,
              EndTime: data?.EndTime,
            }
          }
          // 设置设备工作时间
          this.http.post(this.$api.Schedule + 'GetMachineClendar',
            {
              ...machineData
            }
          ).then((r) => {
            this.editFormVisible = false
            this.getList()
            this.curId = null
            this.MachineInfo = [{}]
            this.data = {}

          })
        })
        .finally(() => {
          this.submitLoading = false
        })
    },
    getList() {
      this.popupShow = false
      this.leftList = []
      this.rightList = []
      this.pageLoading = true
      let url = this.apiList || this.api + 'getlist'
      this.http.get(url, this.query)
        .then((r) => {
          this.list = this.formatList(r)
          this.getMachineOptions()

        })
        .finally(() => {
          this.pageLoading = false
        })
    },
    getMachineOptions() {
      this.http.post(this.$api.machine + 'GetPageData', {
        rows: 999,
      }).then((r) => {
        this.MachineOptions = r.rows
      })
    },
    updateItem() {
      this.updateFlag = false
      // 获取this.list中最大的日期WorkDate和最小的日期WorkDate
      this.editFormVisible = true
      this.MachineInfo = [{}]
      let tmp = this.fields.find(i => i.key = 'dateTime')
      tmp.hidden = false

      this.pickerOptions = {
        disabledDate(time) {
          // 判断当前日期是否小于最小日期或大于最大日期  
          // 如果是，则返回true，表示这个日期被禁用  
          return time.getTime() < min.WorkDate.getTime() || time.getTime() > max.WorkDate.getTime();
        }
      }


    },
    beforeCheckedData(data) {
      let tmp = _.cloneDeep(data)
      tmp.StartTime = tmp.dataTime[0]
      tmp.EndTime = tmp.dataTime[1]
      tmp.ShiftType = (tmp.ShiftType - 1).toString()
      if (tmp.ShiftType == 2) {
        delete tmp.ShiftType
      }
      delete tmp.dataTime
      return tmp
    },
    submit3(data) {
      this.submitLoading = true
      this.http.get(
        `${this.$api.calendar}${this.actionsOverType == 1 ? 'APSLineIntermodulation' : 'DeleteMany'
        }`,
        this.beforeCheckedData(data),
        'post'
      )
        .then((r) => {
          this.editFormVisible3 = false
          this.submitLoading = false
          this.getList()
        })
        .catch((r) => {
          this.editFormVisible3 = false
          this.submitLoading = false
        })
    },
    // 右键展示菜单
    showPopup(type, item, day, event) {
      event.preventDefault()
      if (type == 0) {
        this.popup.top = event.pageY - event.offsetY - 70
      } else {
        this.popup.top = event.pageY - event.offsetY - 50
      }
      if (item && item.Id) {
        this.popupList.forEach((c) => {
          if (c.title == '新增') {
            c.ishaveDate = false
          } else {
            c.ishaveDate = true
          }
        })
      } else {
        this.popupList.forEach((c) => {
          if (c.title == '编辑' || c.title == '删除') {
            c.ishaveDate = false
          } else {
            c.ishaveDate = true
          }
        })
      }
      this.popup.left = event.pageX - event.offsetX - 70
      this.popupShow = true
      // console.log(this.popup.top, this.popup.left)
      this.popupType = type
      this.popupData = item
        ? item
        : {
          WorkDate: day,
        }
    },
    // 右边处理
    async calendarClickSelect(type) {
      this.submitLoading = false

      switch (type) {
        case 1:
          this.updateFlag = true
          this.editFormVisible = true
          this.MachineInfo = [{}]

          console.log(this.row, 'this.row')
          this.MachineInfo = this.row.map(i => {
            return {
              ...i,
              time: [dayjs(i.StartTime).format('HH:mm'), dayjs(i.EndTime).format('HH:mm')]
            }
          })
          if (this.MachineInfo.length == 0) {
            this.MachineInfo = [{
              time: null,
              MachineId: null,

            }]
          }
          let tmp = this.fields.find(i => i.key = 'dateTime')
          tmp.hidden = true
          // this.editItem(this.row, this.calendarType)
          break
        case 2:
          this.data2.Items = []
          this.data2.MachineCalendarId = this.curId
          this.submit2()
          break
      }
    },
    // 右键事件处理
    async popupClick(item) {

    },
    queryMouthChange(flag) {
      if (flag) {
        this.query.time = dayjs(this.query.time)
          .add(1, 'months')
          .format('YYYY-MM-DD')
      } else {
        this.query.time = dayjs(this.query.time)
          .add(-1, 'months')
          .format('YYYY-MM-DD')
      }
      this.getList()
    },
    topRightShowClick() {
      if (this.row.Id) {
        this.showRight = !this.showRight
      } else {
        this.$message.info('请选择一个班次')
      }
    },
  },
  created() {
    // this.getLineOptions()
    this.getForemanOptions()
  },
  mounted() {
    this.getList()
  },
}
</script>
<style lang="scss" scoped>
.app-container {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
}

.app-container::-webkit-scrollbar {
  width: 3px;
}

.topTitle {
  border: 1px solid #e4e4e4;
  padding: 38px 10px 10px;
  position: relative;
}

.topTitle .top-title {
  transition: all 0.5s;
  color: #666;
  background: #f1f1f1;
  height: 28px;
  line-height: 28px;
  position: absolute;
  width: 100%;
  left: -10px;
  font-size: 12px;
  font-weight: 500;
  padding-left: 20px;
  top: 0;
  left: 0;
  border-bottom: 1px solid #e4e4e4;
  // letter-spacing: 2px;
  z-index: 9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.calendar {
  width: 100%;

  &_header {
    display: flex;
    width: 100%;

    .calendar_item {
      height: 40px;
      line-height: 40px;
      // background: #cacaca;
      border-color: #f1f1f1;
      color: #999;
      font-size: 16px;
    }

    // .calendar_item:nth-last-child(1),
    // .calendar_item:nth-last-child(2) {
    //   color: rgb(207, 71, 71);
    // }
  }

  &_main {
    display: flex;
    flex-wrap: wrap;
  }

  &_item {
    width: 14%;
    height: 110px;
    border: 1px solid #f1f1f1;
    text-align: center;
    cursor: pointer;
    position: relative;
    font-weight: bolder;

    &_base {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;

      &_isHoliday {
        color: #f56c6c;
      }

      &_class {
        background: #fff;
        color: #78b9fb;
        height: 40px;
        position: relative;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        div {
          width: 100%;
          line-height: 40px;
          transition: all 0.5s;
          white-space: nowrap;
        }

        .fa-icon {
          // padding: 10px;
          margin-right: 8px;
          width: auto;
          height: 40px;
          font-size: 18px;
        }
      }

      &_class:last-of-type {
        // background: rgba(49, 49, 49, 0.799);
        // color: rgb(198, 25, 25);
        color: #67c23a;
      }

      &_class:hover {
        background: rgba(64, 158, 255, 0.3);
        border: 1px dashed;
        // div:first-of-type {
        //   width: 80%;
        // }
      }

      &_class_isClick {
        // background: #67c23a !important;
      }
    }
  }
}

.popup-tooltip {
  position: absolute;
  width: 150px;
  min-height: 20px;
  border: 1px solid #ccc;
  z-index: 999;
  background: #fff;
  box-shadow: 5px 5px 10px 0 #999;

  &-item {
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    font-size: 16px;
    cursor: pointer;
  }

  &-item:hover {
    color: #fff;
    background: #265ece;
  }
}

::v-deep .filter-container .el-date-editor--month.el-input,
::v-deep .filter-container .el-date-editor--month.el-input__inner {
  width: 130px !important;
}
</style>
